<template>
  <el-container>
    <el-main v-loading="loading">
      <el-table :data="userInfoList" align="center">
        <el-table-column prop="id" label="用户ID"/>
        <el-table-column prop="userName" label="用户姓名"/>
        <el-table-column prop="paper" label="证件号码"/>
        <el-table-column prop="mobile" label="手机号"/>
        <el-table-column prop="address" label="用户地区"/>
        <el-table-column prop="cardNum" label="保单号/服务号"/>
        <el-table-column prop="companyName" label="所属企业"/>
        <el-table-column prop="statusName" label="状态"/>
        <el-table-column prop="youServers" label="当前服务"/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="disPath(scope.row)">派单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
import queryString from "querystring";
export default {
  name: "listTable",
  props: ["data", "loading"],
  data() {
    return {
      userInfoList: [],
      id: ""
    };
  },
  methods: {
    handleClick(params) {
      this.id = params.id;
      let address =
        params.provinceValue && params.cityValue && params.countryValue
          ? `${params.provinceValue}-${params.cityValue}-${params.countryValue}`
          : "";
      let param = {
        type: "edit",
        id: this.id,
        cardNum: params.paper,
        mobile: params.mobile,
        userName: params.userName,
        address
      };
      param = queryString.stringify(param || {});
      this.$router.push(`userDetail?${param}`);
    },
    disPath(params) {
      this.id = params.id;
      let address =
        params.provinceValue && params.cityValue && params.countryValue
          ? `${params.provinceValue}-${params.cityValue}-${params.countryValue}`
          : "";
      let param = {
        type: "disPath",
        id: this.id,
        cardNum: params.paper,
        mobile: params.mobile,
        userName: params.userName,
        address
      };
      param = queryString.stringify(param || {});
      this.$router.push(`userDetail?${param}`);
    }
  },
  watch: {
    data(newValue) {
      this.userInfoList = newValue;
    }
  }
};
</script>
<style lang="less" scoped>
</style>